<template>
  <div id="app">
    <div class="btn-box">
      <xiaobu-button type="normal" @click="sayGoodBye" text="再见"></xiaobu-button>
      <xiaobu-button type="danger" @click="sayHello" text="你好"></xiaobu-button>
    </div>


    <div class="time">{{ time | formatDateFilter }}</div>

    <div class="time">{{ time | formatDateFilter("date") }}</div>

    <div class="ancient-poetry">
        <p>卜算子·咏梅</p>
        <p> 【作者】陆游</p>
        <p>【朝代】宋</p>
        <p> 驿外断桥边，寂寞开无主。</p>
        <p> 已是黄昏独自愁，更着风和雨。</p>
        <p> 无意苦争春，一任群芳妒。</p>
        <p> 零落成泥碾作尘，只有香如故。</p>
        <xiaobu-button type="success" text="复制" v-copy="{text: '卜算子·咏梅 【作者】陆游 【朝代】宋 驿外断桥边，寂寞开无主。已是黄昏独自愁，更着风和雨。 无意苦争春，一任群芳妒。 零落成泥碾作尘，只有香如故。', successFn: handleCopySuccess}"></xiaobu-button>
    </div>

    <div class="replace">
      <input type="text" class="input" v-model="searchKey" placeholder="请输入关键字" />

      <div class="content">
        <ul class="search-list" :key="searchKey">
          <li class="search-item" v-for="(item, index) in list" :key="index">
            <p  v-html="item" v-replace="{replaceText: searchKey, replaceContent: `<span class='red'>${searchKey}</span>`}"></p>
          </li>
        </ul>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      time: new Date(),
      timer: null,
      searchKey: "凌寒独自开",
      list: [
        "梅",
        "王安石（宋）",
        "墙角数枝梅, 凌寒独自开。",
        "遥知不是雪, 为有暗香来。"
      ]
    }
  },
  created() {
    this.initTime()
    this.$once("hook:beforeDestroy", () => {
      window.clearInterval(this.timer)
    })
  },
  methods: {
    handleInput(val) {
      console.log("🚀 ~ handleInput ~ val:", val)
    },
    // 更新时间
    initTime() {
      this.timer = window.setInterval(() => {
        this.time = new Date()
      }, 1000)
    },
    sayGoodBye() {
      this.$SayGoodBye("爆米花小布")
    },
    sayHello() {
      this.$SayHello("爆米花小布")
    },
    handleCopySuccess() {
      alert("复制成功")
    }
  }
}
</script>

<style lang="css" scoped>
li {
  list-style: none;
}
#app {
  text-align: center;
}
.btn + .btn{
 margin-left: 20px;
}

#app .btn-box {
  margin-top: 60px;
}

#app .time {
  margin-top: 20px;
}

#app .replace {
  margin-top: 60px;
}

#app .replace .input {
  width: 300px;
  height: 34px;
  outline: none;
  border: 1px solid #e9e9e9;
  padding: 0 12px;
  line-height: 34px;
}

.search-item{
  text-align: center;
  margin-top: 12px;
}

#app .replace .search-item >>> .red {
  color: red;
}
</style>
